import { defineStore } from "pinia";
import { ref, computed } from "vue";

import { useXcartStore } from "./xcart.js";

export const useCartStore = defineStore("cart", () => {
  const xcartStore = useXcartStore();
  const title = ref("cart");
  const count = ref(99);

  const g1 = computed(() => {
    return `hello ${title.value}`;
  });

  const g2 = computed(() => xcartStore.g1);

  const add = () => {
    return count.value + 20;
  };
  return { title, count, g1, add };
});

export const useInfoStore = defineStore("info", () => {
  const form = ref({
    username: "jack",
    age: 20,
    gender: 2,
    hobbys: ["css", "html"],
  });

  return { form };
});

export const useShopStore = defineStore("shop", {
  state: () => ({
    title: "Shop",
    count: 100,
  }),
  getters: {
    g1: (state) => state.count + 100,
    g2: () => 200,
    g3() {
      return this.g1 + this.g2;
    },
    g4() {
      return (value) => {
        return value + this.g1;
      };
    },
    g5() {
      const cartStore = useCartStore();
      const xcartStore = useXcartStore();
      return cartStore.g1 + "!!!" + xcartStore.g1;
    },
  },
  actions: {
    f1: () => 100,
    f2: () => 200,
    add(x) {
      const cartStore = useXcartStore();
      cartStore.say();
      return this.f1() + this.f2() + x;
    },
  },
});
